<script setup lang="ts" name="Template01"></script>

<template>
  <div class="login-container bg-center xl:bg-[position:left_200px_center]">
    <div class="login-box flex-1 xl:flex-[0_0_50%]">
      <div class="w-full sm:max-w-500px">
        <slot />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.login-container {
  position: relative;
  display: flex;
  width: 100vw;
  min-height: 100vh;
  padding: var(--el-space);
  overflow-y: hidden;
  background-color: #2d3a4b;
  background-image: url('@/assets/login/template01/login-bg.png');
  background-repeat: no-repeat;
  align-items: center;
  justify-content: flex-end;
  transition: all .28s;
}

.login-box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all .28s;

  :deep(.login-form) {

    .sign-title{
      color: #fff;
    }

    .el-input {
      background: transparent;
    }

    .el-input__wrapper {
      background-color: transparent;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;

      &.is-focus {
        box-shadow: 0 0 0 1px var(--el-color-primary) inset;
      }
    }

    .el-input__inner {
      color: #fff;

      &::placeholder{
        color:#9c9fa5;
      }
    }

    .el-input__prefix{
      .el-icon{
        color: var(--el-color-primary);
      }
    }

    .el-input__suffix{
      .el-icon {
        color: #6d7182;
      }
    }

    .el-form-item.is-error .el-input__wrapper{
      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
    }

    .el-checkbox{
      color: #9c9fa5;
    }

    .el-link.el-link--primary{
      --el-link-hover-text-color: var(--el-color-primary);
    }

    .el-button--primary{
      --el-button-hover-bg-color: var(--el-color-primary);
      --el-button-outline-color: var(--el-color-primary);
      --el-button-active-color: var(--el-color-primary);
      --el-button-hover-border-color: var(--el-color-primary);
      --el-button-active-bg-color: var(--el-color-primary);
      --el-button-active-border-color: var(--el-color-primary);
    }

    .el-checkbox__inner{
      --el-checkbox-bg-color: #2d3a4b;
      --el-checkbox-input-border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .other-button {
      --el-button-text-color: #9c9fa5;
      --el-button-bg-color: transparent;
      --el-button-border-color: rgba(255, 255, 255, 0.1);
      --el-button-hover-bg-color: transparent;
      --el-button-hover-border-color: var(--el-color-primary);
    }

    .social-icon{
      color: #ced0d5;
    }

    .el-divider--horizontal{
      border-top: 1px rgba(255, 255, 255, 0.1) var(--el-border-style);
    }

    .el-divider__text{
      color: #ced0d5;
      background-color: #2d3a4b;
    }

    .el-input-group__append{
      box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, -1px 0 0 0 rgba(255, 255, 255, 0.1) inset;
    }

    .el-input-group__append, .el-input-group__prepend{
      background-color: transparent;
    }

    .#{$namespace}-input-password__bar {
      background-color: #545a6d;

      &::before,&::after{
        border-color: #2d3a4b;
      }
    }

    .text-link{
      --el-link-text-color: #b6b8c0;
    }
  }
}
</style>
